<template>
  <el-dialog
    title="复用任务列表"
    :visible.sync="reuseDialogData.visible"
    :close-on-click-modal="false"
    width="80%"
    top="8vh"
    append-to-body
  >
    <el-table
      style="width: 100%; margin-top: 20px"
      :data="dataList"
      border
      v-if="tableShow"
      v-loading="dataListLoading"
      key="u1"
    >
      <el-table-column
        type="index"
        width="80"
        header-align="center"
        align="center"
        label="序号"
      ></el-table-column>
      <el-table-column
        prop="faqiName"
        header-align="center"
        align="center"
        label="发起名称"
        min-width="200"
      >
      </el-table-column>
      <el-table-column
        prop="userName"
        header-align="center"
        align="center"
        min-width="120"
        label="被考核人编号"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        prop="ryName"
        header-align="center"
        align="center"
        min-width="120"
        label="被考核人姓名"
        show-overflow-tooltip
      >
        <template slot-scope="scope">
          <span
            @click="checkDetails(scope.row.id)"
            style="color: #0e258c; cursor: pointer"
            >{{ scope.row.ryName }}</span
          >
        </template>
      </el-table-column>
      <el-table-column
        prop="userDeptName"
        header-align="center"
        align="center"
        min-width="120"
        label="被考核人单位"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        prop="userZw"
        header-align="center"
        align="center"
        label="被考核人岗位"
        min-width="180"
        v-if="showType == 1"
        show-overflow-tooltip
      >
        <template slot="header">
          <el-tooltip placement="top" content="点击切换至被考核人职级">
            <span @click="switchBtn(2)">被考核人岗位</span>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column
        prop="userZj"
        header-align="center"
        align="center"
        label="被考核人职级"
        v-if="showType == 2"
        min-width="180"
        show-overflow-tooltip
      >
        <template slot="header">
          <el-tooltip placement="top" content="点击切换至被考核人岗位">
            <span @click="switchBtn(1)">被考核人职级</span>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column
        prop="rwCount"
        header-align="center"
        align="center"
        min-width="90"
        label="任务数量"
      >
      </el-table-column>
      <el-table-column
        prop="userLx"
        header-align="center"
        align="center"
        min-width="120"
        label="发起类型"
      >
      </el-table-column>
      <el-table-column
        prop="stateExplain"
        label="任务状态"
        header-align="center"
        align="center"
        min-width="120"
      >
      </el-table-column>
    </el-table>
    <div class="avue-crud__pagination" v-if="tableShow">
      <el-pagination
        @size-change="sizeChangeHandle"
        @current-change="currentChangeHandle"
        :current-page="pageIndex"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pageSize"
        :total="totalPage"
        background
        layout="total, sizes, prev, pager, next, jumper"
      >
      </el-pagination>
    </div>
    <el-table
      ref="multipleTable"
      style="width: 100%; margin-top: 20px"
      :data="detailList"
      border
      v-if="detailshow"
      v-loading="loading"
      key="u2"
    > 
      <el-table-column type="selection" width="50" align="center"></el-table-column>
      <el-table-column
        prop="batchNumber"
        width="60"
        header-align="center"
        align="center"
        label="批次"
      ></el-table-column>
      <el-table-column
        prop="renwuName"
        header-align="center"
        align="center"
        label="任务名称"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column label="难度系数" header-align="center" align="center">
        <el-table-column
          prop="zycd"
          header-align="center"
          align="center"
          label="重要程度"
        >
          <template slot="header" slot-scope="scope">
            <span style="margin-right: 15px">重要程度</span>
            <el-tooltip class="item" effect="dark" placement="top-start">
              <div slot="content">
                说明：<br />
                1. 重要程度高，是指重点任务对集团层面有重要影响；<br />
                2. 重要程度较高，是指重点任务对公司层面有重要影响；<br />
                3. 重要程度一般，是指重点任务对部门层面有重要影响；<br />
              </div>
              <i class="el-icon-info" style="color: #3e51a3"></i>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column
          prop="wcnd"
          header-align="center"
          align="center"
          label="完成难度"
        >
          <template slot="header" slot-scope="scope">
            <span style="margin-right: 15px">完成难度</span>
            <el-tooltip class="item" effect="dark" placement="top-start">
              <div slot="content">
                说明：<br />
                1. 完成难度高，是指重点任务创新性强、协调难度大；<br />
                2. 完成难度较高，是指重点任务有一定创新性、需要争取政策支持；<br />
                3.
                完成难度一般，是指重点任务有一定难度，但有专业团队支持，本部门能够独立承担工作；<br />
              </div>
              <i class="el-icon-info" style="color: #3e51a3"></i>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column
        header-align="center"
        align="center"
        label="任务有效期"
        min-width="400"
      >
        <el-table-column
          prop="rwYxqq"
          align="center"
          label="开始时间"
          width="200"
        >
        </el-table-column>
        <el-table-column
          prop="rwYxqz"
          align="center"
          label="结束时间"
          width="200"
        >
        </el-table-column>
      </el-table-column>
      <el-table-column
        prop="weightset"
        header-align="center"
        align="center"
        label="权重"
      >
      </el-table-column>
      <el-table-column
        prop="workTarget"
        header-align="center"
        align="center"
        label="工作目标/成效"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        prop="auditStatusDsc"
        header-align="center"
        align="center"
        width="120"
        label="状态"
      >
      </el-table-column>
    </el-table>
    <div style="text-align: right;margin-top: 20px;" v-if="detailshow">
        <el-button type="primary" plain @click="submit">确定</el-button>
        <el-button type="primary" plain @click="backBtn">返回</el-button>
    </div>
  </el-dialog>
</template>
<script>
import { pageForFuyong } from "@/api/hetongrenwu/zhongdian/rwcj";
import { getDetailListdepid } from "@/api/hetongrenwu/zhongdian/renwuchuangjian";
export default {
  props: {
    reuseDialogData: {},
  },
  data() {
    return {
      dataList: [],
      dataListLoading: false,
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      tableShow: true,
      showType: 1,
      loading: false,
      detailList: [],
      detailshow:false,
    };
  },
  watch: {
    reuseDialogData: {
      handler(newVal, oldVal) {
        if (newVal.visible) {
          this.getDataList();
          this.tableShow = true;
          this.detailshow = false;
        }
      },
      immediate: true,
      deep: true,
    },
  },
  methods: {
    getDataList() {
      var params = {
        current: this.pageIndex,
        size: this.pageSize,
      };
      this.dataListLoading = true;
      pageForFuyong(params).then((response) => {
        this.dataList = response.data.data.records;
        this.totalPage = response.data.data.total;
        this.dataListLoading = false;
      });
    },
    checkDetails(id) {
      this.tableShow = false;
      this.detailshow = true;
      this.loading = true;
      getDetailListdepid({ id }).then((response) => {
        console.log(response.data.data);
        this.detailList = response.data.data;
        this.loading = false;
      });
    },
    switchBtn(e) {
      this.showType = e;
      this.tableShow = false;
      this.$nextTick((res) => {
        this.tableShow = true;
      });
    },
    backBtn(){
      this.detailshow = false;
      this.$nextTick((res) => {
        this.tableShow = true;
      });
      this.getDataList()
    },
    submit(){
      var data = this.$refs.multipleTable.selection;
      if(data.length == 0){
        this.$message({
          type: "info",
          message: "请至少选择一条数据结束!",
        });
      }else{
        this.$emit("reuseDialogChildren",data);
        this.reuseDialogData.visible = false;
      }
    },
    // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val;
      this.pageIndex = 1;
      this.getDataList();
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageIndex = val;
      this.getDataList();
    },
  },
};
</script>
